<ng-container *ngIf="type === 'github'">
  <mat-card class="example-card" [@routerTranAni]>
    <mat-card-header>
      <div mat-card-avatar class="example-header-image" [ngStyle]="{'background-image': 'url('+searchResultItem.avatarUrl+')'}"></div>
      <mat-card-title>{{ searchResultItem.userName }}</mat-card-title>
      <mat-card-subtitle>{{ searchResultItem.fullName }}</mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>
      <p>{{ searchResultItem.description }}</p>
    </mat-card-content>
    <mat-card-actions class="repo-actions">
      <em class="repo-language">{{ searchResultItem.language }}</em>
      <button mat-button>
        <mat-icon class="md-14">remove_red_eye</mat-icon>{{ searchResultItem.watchersCount }}
      </button>
      <button mat-button>
        <mat-icon class="md-14">call_split</mat-icon>{{ searchResultItem.forksCount }}
      </button>
      <button mat-button>
        <mat-icon class="md-14">star</mat-icon>{{ searchResultItem.stargazersCount }}
      </button>
      <button mat-button>
        <mat-icon class="md-14">file_copy</mat-icon>{{ (searchResultItem.repoSize / 1024) | round:1 }}M</button>
    </mat-card-actions>
  </mat-card>
</ng-container>

<ng-container *ngIf="type === 'cloudmusic'">
  <mat-card class="example-card" [@routerTranAni]>
    <mat-card-header>
      <div mat-card-avatar class="example-header-image" [ngStyle]="{'background-image': 'url('+searchResultItem.picUrl+')'}"></div>
      <mat-card-title>{{ searchResultItem.songName }}</mat-card-title>
      <mat-card-subtitle>Dog Breed</mat-card-subtitle>
    </mat-card-header>
    <div mat-card-image class="card-image">
      <img [src]="searchResultItem.picUrl" width="100%" alt="Photo of a Shiba Inu">
      <app-player (playHandle)="play()"></app-player>
    </div>
  </mat-card>
</ng-container>